<template>
    <el-dialog :visible.sync="showPrint" :append-to-body="true" :close-on-click-modal="false" width="40%"
        :close-on-press-escape="false" :show-close="false" class="ele-modal" :modal-append-to-body='false'>
        <div class="wrapper wrapper-content p-xl" id="printTest" style="font-size: 20px;">
            <div class="ibox-content p-xl">
                <div class="row">
                    <div class="col-sm-12">
                        <h4>订单编号:</h4>
                        <h4 class="text-navy">{{order.orderNumber}}</h4>
                        <address>
                            <strong><strong>团名称: </strong>{{order.store.storeName}}</strong><br>
                            <strong>团地址: </strong>{{order.store.address}}<br>
                            <strong>团长电话:</strong> {{order.store.mobile}}
                        </address>
                        <p>
                            <span><strong>日期：</strong>{{printTime}}</span>
                        </p>
                    </div>
                </div>
                <div class="table-responsive m-t">
                    <table class="table invoice-table">
                        <thead>
                            <tr>
                                <th>商品清单</th>
                                <th>数量</th>
                                <th>单价</th>
                                <th>总价</th>
                            </tr>
                        </thead>
                        <tbody v-for="(item, index) in order.orderGoodsList" :key="index">
                            <tr>
                                <td>
                                    <div><strong>{{item.goodsName}}</strong>
                                    </div>
                                </td>
                                <td>{{item.num}}</td>
                                <td>&yen;{{item.price}}</td>
                                <td>&yen;{{item.num * item.price}}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <!-- /table-responsive -->
                <table class="table invoice-total">
                    <tbody>
                        <tr>
                            <td><strong>合计:</strong>
                            </td>
                            <td>&yen;{{order.totalAmount}}</td>
                        </tr>
                    </tbody>
                </table>
                <strong>用户备注:</strong>
                {{order.remark}}
            </div>
        </div>
        <div slot="footer" class="row" style="text-align: right;margin-right: 5px;">
            <a class="revision-btn" href="javaScript:void(0)" @click="onCancel">取 消</a>
            <a class="revision-btn" href="javaScript:void(0)" @click="onCancel" v-print="'#printTest'">打 印</a>
        </div>
    </el-dialog>
</template>

<script>
    export default {
        name: "printOrder",
        props: {
            order: {
                type: Object
            },
            showPrint: {
                type: Boolean,
                default: false
            }
        },
        data() {
            return {
                printTime: ''
            }
        },
        mounted: function() {
            var date = new Date();
            var month = date.getMonth() + 1;
            var strDate = date.getDate();
            var h = date.getHours()
            var m = date.getMinutes()
            var s = date.getSeconds()
            if (month >= 1 && month <= 9) {
                month = "0" + month;
            }
            if (strDate >= 0 && strDate <= 9) {
                strDate = "0" + strDate;
            }
            this.printTime = date.getFullYear() + '-' + month + '-' + strDate + ' ' + h + ':' + m + ':' + s;
        },
        methods: {
            onCancel() {
                this.newForm = this.$options.data().newForm;
                this.$emit('onCancelPrintModal');
            },
        }
    }
</script>

<style scoped>
    .product-detail-modal {
        font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-size: 12px;
        color: #676a6c;
    }

    .ele-modal /deep/ .el-dialog__header {
        border-bottom: 1px solid #e5e5e5;
        padding: 5px 0 2px 15px !important;
    }

    .ele-modal /deep/ .el-dialog__body {
        padding: 0 20px 30px 20px;
    }

    .ele-modal /deep/ .el-dialog__footer {
        border-top: 1px solid #e5e5e5;
        padding: 15px;
    }
</style>
